#course-discuss {

  width: 73%;

  .article-comment {
    background-color: #fff;

    margin: 12px 0;
    padding: 12px 36px;

    .comment-input {

      margin: 6px 0 18px;

      .el-input {
        width: 92%;
      }

      .el-input-group__prepend {
        background-color: #fff;
        border: none;

      }

      .el-input-group__append {
        background-color: #2196f3;
        color: #fff;

      }
    }

    &-item {

      margin: 16px 0;

      .el-row {
        flex-flow: row wrap;

        .el-col {

          &:first-child {
            width: 50px;
            margin-right: 16px;


          }

          &.root-reply {
            border-top: 1px solid #e3e3e3;

            .reply_comment {
              padding: 6px 0;

              background: aliceblue;

              &:last-child {
                padding-bottom: 12px;
              }


              .a-c-h-other {

                .other {

                  .comment {

                    span {
                      font-weight: 500;

                      a {
                        text-decoration: none;
                        color: #333;
                      }
                    }
                  }
                }
              }
            }
          }

          &:not(:first-child) {

            flex: 1;
            min-width: 85%;
            max-width: 85%;
            line-height: 1.5;

            position: relative;

            .a-c-h-other {


              .author {
                height: 32px;
                line-height: 32px;



                &>div {
                  display: inline-block;

                  &:first-child {
                    font-size: 18px;
                    font-weight: 600;
                  }

                  &:not(:first-child) {
                    margin-left: 16px;
                    font-size: 12px;
                  }
                }
              }

              .other {
                font-size: 18px;

                p {
                  font-weight: 200;
                }

                div {
                  padding-right: 24px;
                  font-size: 14px;

                  span+span {

                    margin-left: 16px;

                  }

                  span {
                    cursor: pointer;

                    &:before {
                      padding-right: 6px;
                    }
                  }
                }
              }


            }




          }




        }
      }


    }

  }


  #comment {

    background: #fff;
    padding: 16px 36px;
    margin: 16px 0;

    min-height: 300px;

    .el-input {

      .el-input-group__append {
        padding: 0;

        &:hover {
          background-color: #548dbe;
          color: #fff;

        }

        span {
          padding: 10px 20px;
          cursor: pointer;
        }
      }
    }

    .article-comment-item {

      margin: 16px 0;

      .el-row {
        flex-flow: row wrap;

        .el-col {

          &:first-child {
            width: 50px;
            margin-right: 32px;


          }

          &.root-reply {
            border-top: 1px solid #e3e3e3;

            .reply_comment {
              padding: 8px 16px 0;

              background: aliceblue;

              &:last-child {
                padding-bottom: 12px;
              }


              .a-c-h-other {

                .other {

                  .comment {

                    span {
                      font-weight: 500;

                      &:last-child {

                        text-decoration: underline;

                      }

                      a {
                        text-decoration: none;
                        color: #333;
                      }
                    }
                  }
                }
              }
            }
          }

          &:not(:first-child) {

            flex: 1;
            min-width: 85%;
            max-width: 85%;
            line-height: 1.5;

            position: relative;

            .a-c-h-other {


              .author {
                height: 32px;
                line-height: 32px;



                &>div {
                  display: inline-block;

                  &:first-child {
                    font-size: 16px;
                    font-weight: 600;
                  }

                  &:not(:first-child) {
                    margin-left: 16px;
                    font-size: 12px;
                  }
                }
              }

              .other {
                font-size: 16px;

                .comment {
                  font-weight: 200;

                  a {

                    padding: 6px;
                  }
                }

                &>div:not(.reply-input) {
                  padding: 8px 0;
                  padding-right: 24px;
                  font-size: 14px;

                  span+span {

                    margin-left: 16px;

                  }

                  span {
                    cursor: pointer;

                    &:before {
                      padding-right: 6px;
                    }
                  }


                }

                .reply-input {


                  padding: 8px 0;


                }
              }


            }




          }




        }
      }


    }
  }
}